<template>
  <el-container>
    <el-header class="header">
      <div class="left">
          <div class="group">
            <span>分院名称：</span>
            <el-input class="com-input" placeholder="请输入分院名称" v-model="name" />
          </div>
          <div class="group area">
            <span>地区：</span>
            <user-address ref="branchAddress"/>
          </div>
      </div>
      <div class="right">
        <el-button type="primary" @click="search" icon="el-icon-search" class="btn">查询</el-button>
        <el-button type="primary" @click="addCom" class="btn">新增分院</el-button>
      </div>
    </el-header>
  </el-container>
</template>
<script>
import UserAddress from "components/address";
export default {
  name: "branchOptions",
  data() {
    return {
      name: "", //分院名称
      code: "0", //由哪里进入
      codeId: '' //进入ID
    };
  },  
  components: {
    UserAddress,
  },
  mounted(){
    if( this.$route.query ){
      let { code, id } = this.$route.query;
      this.code = code;
      this.codeId = id;
    } 
  },
  methods: {
    addCom() {
      this.$router.push(`branchAdd?type=add&code=${this.code}&codeId=${this.codeId}`);
    },
    search(){
      this.$emit("search");
    },
    getData(){
      let params = { name: this.name };
      let code = this.code;
      let codeId = this.codeId;
      if( code === "0" ) params.physicalId = codeId;
      if( code === "1" ) params.chinaMedId = codeId;
      if( code === "2" ) params.dentistryId = codeId;
      return this.lodash.assign({}, params, this.$refs.branchAddress.getData());
    }
  }
};
</script>
<style lang="less" scoped>
@import url("./../../../../assets/less/color.less");
.header {
  display: flex;
  text-align: left;
  flex-wrap: wrap;
  border-bottom: 1px solid @border-gray;
  height: inherit !important;
  padding-bottom: 10px;
  .group {
    padding: 10px;
    &:first-child{
      padding-top: 0;
    }
    &.area{
      display: flex;
      align-items: center;
      text-align: right;
      margin-bottom: 0;
    }
    .section {
      display: inline-block;
      text-indent: 4.5em;
    }
    .text {
      display: inline-block;
      text-indent: 2em;
    }
  }
  .com-input {
    width: 210px;
    margin-right: 20px;
  }
  .left{
    span{
      display: inline-block;
      min-width: 80px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    .btn {
      margin-left: 20px;
    }
  }
}
</style>